<template>
  <div class="box" v-loading="loading">
    <!-- 标题 -->
    <div class="title">
      <div class="title_fan">
        <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
        {{ isAutoRecharge ? $t('Homepage') : $t('home.Deposit') }}
      </div>
      <!-- 图片信息 -->
      <div class="title_cen">
        <img src="../../../../assets/static/autoRcharge/c1.png" alt="">
        <div>
          <div class="title_cen_title">
            {{ isAutoRecharge ? $t('Homepage') : $t('home.Deposit') }}
          </div>
          <div v-show="isAutoRecharge">{{ $t('Never run out of balance with Auto-Reload on') }}</div>
        </div>
      </div>
    </div>
    <!-- card -->
    <div class="card">
      <div v-show="isAutoRecharge">
        <div class="card_title card_color">
          <img src="../../../../assets/static/recharge/q4.png" alt=""/>
          <div>{{ $t('When your balance drops to') }}</div>
        </div>
        <div class="card_input">
          <input v-model="autopay_less"
                 type="number" :placeholder="$t('Enter Amount')"></div>
      </div>
      <div>
        <div class="card_title card_color">
          <img src="../../../../assets/static/recharge/q4.png" alt=""/>
          <div>{{ $t('Enter Amount') }}</div>
        </div>
        <div class="card_input card_selsct row-wrapper"
             style="justify-content: space-between">
          <input type="number" step="100" v-model="autopay_price"/>
        </div>
      </div>
      <div>
        <div class="card_title">
          <img src="../../../../assets/static/recharge/q4.png" alt=""/>
          <div>{{ $t('Ways to add funds to your balance') }}</div>
        </div>
        <div class="card_input row-wrapper" style="justify-content: space-between">
          <el-select style="width: 100%" v-model="payType" placeholder="请选择支付方式">
            <el-option :label="$t('银行卡支付')" value="bank">
              <div class="row-wrapper" style="justify-content: space-between">
                <img class="payIcon"
                     src="../../../../assets/static/autoRcharge/bank.svg"
                     alt=""/>
                <span>{{ $t('银行卡支付') }}</span>
              </div>
            </el-option>
            <el-option label="pay now" value="payNow">
              <div class="row-wrapper" style="justify-content: space-between">
                <img class="payIcon"
                     src="../../../../assets/static/autoRcharge/paynow-logo-blue.svg"
                     alt=""/>
                <span>pay now</span>
              </div>
            </el-option>
            <el-option :label="$t('微信支付')" value="wechat">
              <div class="row-wrapper" style="justify-content: space-between">
                <img class="payIcon"
                     src="../../../../assets/static/autoRcharge/wechat.svg"
                     alt=""/>
                <span>{{ $t('微信支付') }}</span>
              </div>
            </el-option>
          </el-select>
          <!--          <el-select v-model="bankId">-->
          <!--            <el-option v-for="item in dataList"-->
          <!--                       :key="item.ROW_NUMBER"-->
          <!--                       :label="item.card_number"-->
          <!--                       :value="item.id">-->
          <!--              {{ item.card_number }}-->
          <!--            </el-option>-->
          <!--          </el-select>-->
        </div>
        <!--        银行卡支付-->
        <div v-show="payType==='bank'">
          <!--          <div class="col-wrapper">-->
          <!--            <img src="../../../../assets/static/autoRcharge/bank.svg"-->
          <!--                 style="margin-top: 10px" class="wechat"-->
          <!--                 alt=""/>-->
          <!--          </div>-->
          <div v-for="item in dataList"
               :key="item.ROW_NUMBER"
               @click="bankId=item.id"
               :class="item.id===bankId?'color-card-blue':'color-card-unChoose'"
               class=" color-card-blue color_card_title">
            {{ item.bank_name + ' ' + item.card_number }}
          </div>
          <div @click="bind_user_bank_pay"
               class="color_card color_card_title">
            <div>{{ $t('home.Adddebit/creditcard') }}</div>
            <img src="../../../../assets/static/autoRcharge/i3.png" alt="">
          </div>
          <div class="color_card color_card_size">
            <div>
              <span>Note:</span>
              Cash-ins made by credit cards can't
              be sent to contacts or bank accounts.
            </div>
            <img src="../../../../assets/static/autoRcharge/i2.png" alt="">
          </div>
        </div>
        <div v-show="payType==='payNow' " class="col-wrapper">
          <img src="../../../../assets/static/autoRcharge/paynow-logo-blue.svg"
               style="margin-top: 10px"
               alt=""/>
        </div>
        <div v-show="payType==='wechat'" class="col-wrapper">
          <img src="../../../../assets/static/autoRcharge/wechat.svg"
               style="margin-top: 10px" class="wechat"
               alt=""/>
          <!--          <a :href="wechatUrl">微信支付</a>-->
        </div>
      </div>
    </div>
    <div v-show="!isAutoRecharge"
         @click="recharge"
         class="save">{{ $t('home.Deposit') }}
    </div>
    <div v-show="isAutoRecharge"
         @click="setAutoPay"
         class="save">{{ $t('home.Save') }}
    </div>
    <!--    <ifream style="display: none" :src="wechatUrl"></ifream>-->
  </div>
</template>

<script>
import {bankCardList, setAutopayLess} from '@/api/merbership/member'
import '@/styles/flax.css'
// import '@/styles/elInput.scss'
import {info} from '@/api/merbership/member'
import {bind_user_bank_pay, create_recharge, qrcode_recharge_paynow, wechat_recharge} from '@/api/merbership/userpay'

export default {
  data() {
    return {
      dataList: [],
      isAutoRecharge: false,
      autopay_less: '',
      autopay_price: '',
      bankId: '',
      loading: false,
      //   ---------------- 支付方式 -----------------
      payType: 'bank',
      wechatUrl: ''
    }
  },
  activated() {
    this.bankCardList()
    this.getInfo()
  },
  deactivated() {
    this.loading = false
  },
  methods: {
    /**
     * 充值
     */
    recharge() {
      switch (this.payType) {
        case 'bank':
          this.create_recharge()
          break
        case 'payNow':
          this.qrcode_recharge_paynow()
          break
        case 'wechat':
          this.wechat_recharge()
          break
        default:
          break
      }
    },
    /**
     * 金额只能输入数字
     */
    onlyNum() {
      // this.autopay_price = this.autopay_price.replace(/^[A-Za-z]+$/g, '')
      // this.autopay_price = this.autopay_price.replace(/^[\u4e00-\u9fa5_a-zA-Z]+$/g, '')
      if (isNaN(Number(this.autopay_price))) {
        this.autopay_price = this.autopay_price.replace(/[^\d]/g, '')
      }
    },
    // ------------------ axios -------------------
    /**
     * 微信支付
     */
    wechat_recharge() {
      const pd = {
        money: this.autopay_price
      }
      this.loading = true
      wechat_recharge(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.loading = false
            this.$message.success(res.data.msg)
            this.$router.push({
              path: '/listweChat',
              query: {
                qrcode: res.data.data.codeurl,
                order_no: res.data.data.order_no
              }
            })
          } else {
            this.loading = false
            this.$message.error(res.data.msg)
          }
        })
    },
    /**
     * 充值1元绑定银行卡
     */
    bind_user_bank_pay() {
      this.loading = true
      const pd = {}
      this.$message.info('请稍后')
      bind_user_bank_pay(this.$qs.stringify(pd))
        .then(res => {
          // this.loading = false
          if (res.data.code === 1) {
            window.location.replace(res.data.data)
            // this.create_recharge()
          } else {
            this.loading = false
            this.$message.error(res.data.msg)
          }
        })
    },
    /**
     * 设置自动充值
     */
    setAutoPay() {
      const pd = {
        autopay_less: this.autopay_less,
        autopay_price: this.autopay_price
      }
      setAutopayLess(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
    },
    /**
     * 充值
     */
    create_recharge() {
      if (this.payType === 'bank' && this.bankId === '') {
        this.$message.error('请选择一张银行卡')
        return ''
      }
      const pd = {
        money: this.autopay_price,
        user_bank_id: Number(this.bankId)
      }
      this.$message.success('请稍后')
      this.loading = true
      create_recharge(this.$qs.stringify(pd))
        .then(res => {
          this.loading = false
          if (res.data.code === 1) {
            // window.location.replace(res.data.data)
            this.$alert(res.data.msg, '提示', {
              customClass: 'alertTips'
            })
          } else {
            this.$message.error(res.data.msg)
          }
        })
    },
    /**
     * 会员详情
     */
    getInfo() {
      const pd = {}
      info(pd)
        .then(res => {
          if (res.data.code === 1) {
            this.isAutoRecharge = res.data.data.is_autopay === '2'
            if (this.isAutoRecharge) {
              this.autopay_less = res.data.data.autopay_less === null ? '0.00' : res.data.data.autopay_less
              this.autopay_price = res.data.data.autopay_price === null ? '0.00' : res.data.data.autopay_price
            }
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(err => {
        this.$message.error(err)
      })
    },
    /**
     * 银行卡列表
     */
    bankCardList() {
      const pd = {}
      bankCardList(this.$qs.stringify(pd))
        .then(res => {
          this.dataList = res.data.data.list
        })
    },
    /**
     * payNow支付
     */
    qrcode_recharge_paynow() {
      const pd = {
        money: this.autopay_price
      }
      this.loading = true
      qrcode_recharge_paynow(this.$qs.stringify(pd))
        .then(res => {
          // this.loading = false
          if (res.data.code === 1) {
            this.$router.push({
              path: '/listpayNow',
              query: {
                qrcode: res.data.data.codeurl,
                order_no: res.data.data.order_no
              }
            })
            // window.location.replace(res.data.data.codeurl)
            // this.create_recharge()
          } else {
            this.loading = false
            this.$message.error(res.data.msg)
          }
        })
    }
  }
}
</script>
<style>
.alertTips {
  width: 80%;
}

.el-select-dropdown {
  overflow: scroll;
}

.el-scrollbar {
  overflow-y: scroll;
}

.el-select .el-input.is-focus .el-input__inner {
  border-color: transparent;
}

.el-select .el-input .el-select__caret {
  /*display: none;*/
}

.el-input__inner {
  appearance: none;
  width: 100% !important;
  border-color: transparent;
  outline: none;
  box-shadow: transparent;
}

.el-select:hover .el-input__inner {
  border-color: transparent;
  outline: none;
}

.el-select:focus .el-input__inner {
  border-color: transparent;
  outline: none;
}

.el-select .el-input__inner:focus {
  border-color: transparent;
}
</style>
<style lang="scss" scoped>
.wechat {
  width: 180px;
  height: 40px;
}

.payIcon {
  width: 80px;
  height: 34px;
}

input {
  height: 20px;
}

.bankName {
  //color: #1F1F1F !important;
}

.bankCard {
  box-shadow: 0 7px 23px 1px rgba(180, 180, 180, 0.4);
  //background-color: rgba(20, 85, 178, 0.25);
  //background-color: rgba(20, 85, 178, 1);
  margin: 12px 0;
  display: flex;
  align-items: center;
  border-radius: 10px;
  font-weight: bold;
}

.cardNum {
  color: #1F1F1F !important;
  margin-left: 15px;
}

.box {

  /* 标题 */
  .title {
    background-image: linear-gradient(to bottom, #7ac91b 65%, #f5f5f5 0);
    font-weight: bold;

    .title_fan {
      color: #fff;
      font-size: 18px;
      padding: 15px;
      text-align: center;

      .el-icon-arrow-left {
        float: left;
        margin-top: 5px;
      }
    }
  }

  .title_cen {
    margin: 0 15px;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    display: flex;
    font-size: 12px;
    font-weight: normal;
    color: #333;

    img {
      width: 65px;
      margin-right: 17px;
    }

    .title_cen_title {
      font-size: 17px;
      color: #62BF03;
      font-weight: bold;
    }
  }

  .card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    margin: 15px;
    padding: 20px 10px;

    .card_title {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: bold;

      img {
        width: 2.5px;
        height: 12.5px;
      }

      > div {
        margin-left: 8px;
      }
    }

    .card_color {
      color: #65BD06;
    }

    .card_input {
      justify-content: space-between;
      padding: 10px 12px;
      box-shadow: 0 5px 10px #ccc;
      margin: 14px 0;
      border-radius: 10px;
      font-size: 11px;

      input {
        width: 100%;
        border: none;
        outline: none;
        height: 38px;
        color: #999999;
      }

      input::-webkit-input-placeholder {
        color: #999;
      }
    }

    .card_selsct {
      display: flex;
      align-items: center;

      select {
        width: 100%;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: none;
        outline: none;
        color: #999999;
      }

      select::-ms-expand {
        display: none;
      }
    }

    .color-card-blue {
      background-color: rgba(14, 105, 196, 0.25);
      margin: 12px 0;
      display: flex;
      align-items: center;
      border-radius: 10px;
      font-weight: bold;
    }

    .color-card-unChoose {
      background-color: rgba(162, 182, 203, 0.25);
      margin: 12px 0;
      display: flex;
      align-items: center;
      border-radius: 10px;
      font-weight: bold;
    }

    .color_card {
      background-color: rgba(109, 196, 14, 0.25);
      margin: 12px 0;
      display: flex;
      align-items: center;
      border-radius: 10px;
      font-weight: bold;
    }

    .color_card_title {
      padding: 23px;
      text-align: center;
      justify-content: center;
      color: #65BD06;
      font-size: 14px;

      img {
        width: 11px;
        height: 11px;
        margin-left: 4px;
      }
    }

    .color_card_size {
      font-size: 12px;
      padding: 18px 27px;

      span {
        color: #67C024;
      }

      img {
        width: 9px;
        height: 9px;
      }
    }
  }

  .save {
    margin: 100px 23px 23px;
    padding: 25px 0 35px 0;
    text-align: center;
    background-image: url(../../../../assets/static/autoRcharge/r1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }
}

.icon {
  transition: transform .5s;
}

.iconDown {
  transform: rotate(180deg);
}
</style>
